<template>
  <div id="home"  >
  <!--内容-->
    <van-row  style="background-color:white;">
      <van-sticky>
        <van-col span="24">
          <van-search
              v-model="value"
              shape="round"
              @focus="focus"
              :clearable="false"
              placeholder="请输入美食">
          </van-search>
        </van-col>
      </van-sticky>
      <van-col span="24">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(image,index) in images" :key="index">
                 <van-image :lazy-load="true" width="100%" height="125" :src="image" radius="2"/>
          </van-swipe-item>
        </van-swipe>
      </van-col>

      <van-col span="24">
        <van-grid :column-num="4" :border="false">
          <van-grid-item  v-for="(item,index) in gridList " :key="index">
            <div class="DivIcon" :style="'background-color:'+item.color">
              <icon-svg size='1.3' :icon-class="item.icon"></icon-svg>
            </div>
                  <p style="padding-top: 10px; font-size: .6em;">{{item.title}}</p>
          </van-grid-item>
        </van-grid>
      </van-col>

      <van-col span="24">
        <van-tabs background="#f7f8fa" :sticky="true" animated   color="#f52443" :swipeable="true" title-active-color="#f52443">
          <van-tab v-for="(item,index) in tabList" :key="index" :title="item.title">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
              <van-cell v-for="(item,index) in cateList" :key="index" >
                <van-card
                    @click="detailItem"
                    style="background-color: white;"
                    :centered="true"
                    :thumb="item.img"
                >
                  <template #title>
                    <p  class="cateTitle">{{item.title}}</p>
                  </template>
                  <template #desc>
                    <p class="cateDesc">
                      {{ item.desc }}
                    </p>
                  </template>
                  <template #price>
                    <p class="catePrice" >
                      {{ item.score }}分 | {{item.scoreDesc}}
                    </p>
                  </template>
                  <template #num>
                    <p class="cateNum" >
                      月销{{ item.sales }}
                    </p>
                  </template>
                </van-card>
              </van-cell>
            </van-list>
          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>
  </div>
</template>

<script>


import {getLocation} from "../../utils/location";

export default {
  name: 'Home',
  data(){
    return{
      value:'',
      images: [
        require('@/assets/img/banner.png'),
        require('@/assets/img/banner1.png'),
        require('@/assets/img/banner2.png'),
      ],
      gridList:[
        {title:"美食",icon:"my-icon-hongpei",method:"",color:'#fff9db'},
        {title:"茶品",icon:"my-icon-chihewanle",method:"",color:'#e6fcf5'},
        {title:"夜宵",icon:"my-icon-yexiao",method:"",color: '#fff4e6'},
        {title:"火热",icon:"my-icon-huore",method:"",color:'#fff5f5'},
      ],
      tabList:[
        {title:'推荐美食'},
        {title:'爆款美食'},
        {title:'下午茶'}
      ],
      cateList: [
        { title:'塔斯汀中国汉堡',
          desc:'这是一家中国汉堡店',
          score:'4,6',
          scoreDesc:'尖椒鸡翅超过瘾',
          sales:'3000',
          img:'https://gitee.com/herther/img/raw/master/img/20210912141230.png'
        },
        { title:'益禾堂',
          desc:'招牌益禾烤奶',
          score:'4,6',
          scoreDesc:'味道不错夏天来一杯奶茶太幸福',
          sales:'5000',
          img:'https://gitee.com/herther/img/raw/master/img/20210912142640.png'
        },
        { title:'华莱士汉堡',
          desc:'本土最大的西式快餐',
          score:'4,7',
          scoreDesc:'很好吃，口感细腻',
          sales:'2000',
          img:'https://gitee.com/herther/img/raw/master/img/20210912143504.png'
        }
      ],
      hotList: '',
      loading: true,
      finished: true,



    }
  },
  methods:{
    onSearch(){
      this.$router.replace("/Search")
    },
    focus(){
      this.$router.replace("/Search")
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }
      //
      //   // 加载状态结束
      //   this.loading = false;
      //
      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
    detailItem(){
      this.$router.replace('/merchantDetail');
    },
  },
  components: {

  },
  created() {
    // getLocation();
  }
}
</script>
<style scoped >
@import "home.css";
</style>
